<!--
 * @Author: liucong19
 * @Date: 2021-07-16 18:02:46
 * @LastEditTime: 2021-07-22 09:37:16
 * @LastEditors: liucong19
 * @Description: video 标签播放视频
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>video 标签播放视频</title>
  <style>
    .wrapper {display: flex; justify-content: center;}
    .video-container {display: flex; flex-direction: column; justify-content: center; align-items: center;}
    .video-info {width: 800px; list-style: none;}
  </style>
</head>
<body>
  <p>HTML5 原生 video 标签播放视频，目前只支持 WebM 、Ogg、MP4 三种封装格式</p>
  <p>当 mp4 文件较大时，缓存时间就比较长，播放体验不好，可以使用 video.js 来播放</p>

  <div class="wrapper">
    <div class="video-container">
      <video id="video" width="800" height="450" controls></video>
      <p>
        <button id="play">播放/暂停</button>
        <button id="muted">静音开关</button>
        <button id="setVolume">播放音量</button>
        <button id="fast">快进2秒</button>
        <button id="setRate">2倍速度播放</button>
        <button id="load">重新加载</button>
      </p>
    </div>
    <ul id="info" class="video-info">
      <li>
        <span>视频地址：</span><span class="currentSrc"></span>
      </li>
      <li>
        <span>视频总时长：</span><span class="duration"></span>
      </li>
      <li>
        <span>当前时间点：</span><span class="currentTime"></span>
      </li>
      <li>
        <span>是否暂停：</span><span class="isPaused"></span>
      </li>
      <li>
        <span>是否静音：</span><span class="isMuted"></span>
      </li>
      <li>
        <span>播放音量：</span><span class="volume"></span>
      </li>
      <li>
        <span>播放速率：</span><span class="playbackRate"></span>
      </li>
    </ul>
  </div>
    

  <script type="module">
    // IE11 不支持 import / export 语法
    import sources from './sources.js'

    // 获取 video 标签，只有设置静音（muted autoplay）才能自动播放，否则需要手动点击
    let video = document.querySelector('#video')
    let info = document.querySelector('#info')

    // 视频源
    video.src = sources.mp4[0]

    /* ---------------- 方法 ---------------- */

    // 播放/暂停
    document.querySelector('#play').addEventListener('click', (e) => {
      if (video.paused) {
        video.play()
      } else {
        video.pause()
      }
    })

    // 静音开关
    document.querySelector('#muted').addEventListener('click', (e) => {
      if (!video.muted) {
        video.muted = true
      } else {
        video.muted = false
      }
      info.querySelector('.isMuted').innerText = video.muted
    })

    // 设置音量 [0, 1]
    document.querySelector('#setVolume').addEventListener('click', (e) => {
      let volume = video.volume * 100
      volume -= 1
      video.volume = Math.round(volume) / 100
    })

    // 快进/后退
    document.querySelector('#fast').addEventListener('click', (e) => {
      video.currentTime += 2
    })

    // 播放速率
    document.querySelector('#setRate').addEventListener('click', (e) => {
      video.playbackRate = 2
    })

    // 重新加载
    document.querySelector('#load').addEventListener('click', (e) => {
      video.load()
    })

    /* ---------------- 事件 ---------------- */

    // 视频可以播放时触发
    video.oncanplay = (e) => {
      info.querySelector('.currentSrc').innerText = video.currentSrc
      info.querySelector('.duration').innerText = video.duration
      info.querySelector('.currentTime').innerText = video.currentTime
      info.querySelector('.isPaused').innerText = video.paused
      info.querySelector('.isMuted').innerText = video.muted
      info.querySelector('.volume').innerText = video.volume * 100
      info.querySelector('.playbackRate').innerText = video.playbackRate
    }

    // 监听播放
    video.onplay = (e) => {
      console.log('play')
      info.querySelector('.isPaused').innerText = video.paused
    }

    // 监听暂停
    video.onpause = (e) => {
      console.log('pause')
      info.querySelector('.isPaused').innerText = video.paused
    }

    // 监听音量
    video.onvolumechange = (e) => {
      console.log('音量: >> ', video.volume)
      info.querySelector('.volume').innerText = video.volume * 100
    }

    // 播放进度改变时触发
    video.ontimeupdate = (e) => {
      info.querySelector('.currentTime').innerText = video.currentTime
    }

    // 播放速度
    video.onratechange = (e) => {
      info.querySelector('.playbackRate').innerText = video.playbackRate
    }

  </script>
</body>
</html>